<template>
  <Row class="page3">
    <Col style="width: 40%; height: 100%">
      <div class="left" style="marginbottom: 2%">
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="topchart">
          <div class="chart-50">
            <pieXueChart ref="chart2" id="left_3" :xData='xData'></pieXueChart>
          </div>
        </div>
      </div>
    </Col>
    <Col style="width: 60%; padding: 0 1%">
      <div class="left" style="height: 100%">
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="chart-33">
          <lineChart ref="chart2" id="left_3" :sData='sData'></lineChart>
        </div>
      </div>
    </Col>
  </Row>
</template>

<script>
const pieXueChart = () => import("./components/page3/pieXueChart");
const lineChart = () => import("./components/page3/lineChart");
import { xueliAnalysis } from "@/api/page2Api";


export default {
  name: "page3",
  components: {
    pieXueChart,
    lineChart,
    
  },
  data() {
    return {
      xData: [],
      sData: []
    };
  },
  mounted() {
    xueliAnalysis().then(res1 => {
      this.xData = res1['学历'].map((it,index) => ({name:it,value:res1['学历岗位数'][index]}))
      this.sData = res1['学历'].map((it,index) => ({name:it,value:res1['学历平均薪资'][index]}))
    })
  },
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.page3 {
  height: 100%;
  width: 100%;
  padding: 14px 20px 20px;
  background: #03044a;
  overflow: hidden;
  .ivu-col {
    height: 100%;
    float: left;
  }

  .left,
  .right1-1,
  .center-bottom {
    height: 100%;
    border: 1px solid #0d2451;
    position: relative;
    background: #151456;
    .topchart {
      height: 100%;
      width: 100%;
      // display: flex;
      .chart-50 {
        height: 100%;
        width: 100%;
        float: left;
      }
    }
    .chart-68 {
      width: 100%;
      height: 100%;
      float: left;
    }

    .chart-33 {
      width: 100%;
      height: 100%;
      float: left;
    }
    #left_5 {
      height: 100%;
      width: 45%;
      float: left;
    }

    #left_6 {
      height: 100%;
      width: 55%;
      float: left;
    }

    .circular {
      height: 100%;

      .canvas {
        height: 100%;
        width: 30%;
        float: left;

        .subtitle {
          font-size: 12px;
          font-weight: bold;
          color: #fff;
          height: 25px;
          padding: 10px 0;
          text-align: center;
        }

        .canvasList {
          height: calc(~"100% - 25px");
          text-align: center;
        }
      }
    }

    .left1 {
      border-bottom: 1px solid #0d2451;
      background: #151456;
    }

    .title {
      position: absolute;
      display: inline-block;
      color: #6eddf1;
      border: 2px solid #6eddf1;
      height: 18px;
      padding: 0 2px;
      left: 50%;
      transform: translate(-50%, -50%);

      .title-text {
        position: relative;
        font-size: 16px;
        background: #09102e;
        display: inline-block;
        padding: 0 4px;
        transform: translateY(-5px);
      }
    }
  }

  .center-top {
    height: 60%;
  }

  .center-bottom {
    height: 40%;

    .bottom-radars {
      height: 55%;
    }

    .bottom-bars {
      height: 45%;
    }
  }

  .right-1 {
    height: 30%;

    .right1-1 {
      height: 92%;
    }
  }

  .right-2 {
    height: 40%;
  }
}
</style>
